<template>
  <div id="app">
    <div class="container">
      <!-- 顶部 -->
      <div class="header">
        <div class="header-container">
          <span>总销售额</span>
          <span>{{ totalData.xs | num }}</span>
          <span class="tody">今日销售额:3,442</span>
        </div>
        <div class="header-container">
          <span>访问量</span>
          <span>836,175</span>
          <span class="tody">今日访问量:3,442</span>
        </div>
        <div class="header-container">
          <span>访问量</span>
          <span>126,878</span>
          <span class="tody">今日销售额:3,442</span>
        </div>
        <div class="header-container">
          <span>支付量</span>
          <span>6,402</span>
          <span class="tody">今日支付量:3,442</span>
        </div>
      </div>

      <!-- body -->
      <div class="body">
        <div class="left">月销售额</div>
        <div class="right">比例分配</div>
      </div>

      <!-- bottom -->
      <div class="bottom">
        <div class="one">
          <div class="top">今日订单</div>
          <div class="btm">
            <span>111</span>
            <span>222</span>
            <span>333</span>
          </div>
        </div>
        <div class="two">
          <div class="top">本月订单</div>
          <div class="btm">
            <span>111</span>
            <span>222</span>
            <span>333</span>
          </div>
        </div>
        <div class="three">
          <div class="top">快捷入库</div>
          <div class="btm">
            <span><el-button type="primary">产品管理</el-button></span>
            <span><el-button>消息管理</el-button></span>
            <span><el-button>内容管理</el-button></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import totalInfo from '@/api/home.js'
export default {
  name: 'HomeIndex',
  data() {
    return {
      // 首页数据
      totalData: {}
    }
  },
  created() {
    this.totalInfo()
  },
  methods: {
    async totalInfo() {
      const res = await totalInfo()
      this.totalData = res.data.list
    }
  },
  filters: {
    num(value) {
      if (!value) return
      return value.toLocateString()
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  height: 895px;
  .container {
    height: 100%;
    padding: 20px 40px 120px;
    background-color: pink;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  div {
    width: 370px;
    height: 130px;
    border-radius: 10px;
  }
  div:nth-child(1) {
    background-color: rgb(197, 124, 107);
  }
  div:nth-child(2) {
    background-color: rgb(50, 125, 200);
  }
  div:nth-child(3) {
    background-color: rgb(160, 84, 151);
  }
  div:nth-child(4) {
    background-color: rgb(28, 163, 203);
  }
}

.header-container {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  span {
    display: block;
    padding-top: 10px;
    padding-left: 10px;
  }
  span:nth-child(2) {
    padding-left: 20px;
    margin-bottom: 40px;
  }
  .tody {
    padding-left: 20px;
    border-top: 1px solid #fff;
  }
}

// body
.body {
  display: flex;
  justify-content: space-between;
  height: 500px;
  margin-top: 20px;
  .left {
    width: 1000px;
    background-color: #fff;
  }
  .right {
    width: 575px;
    background-color: #fff;
  }
}

// bottom
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .top {
    padding-left: 20px;
    padding-bottom: 20px;
    font-weight: 700;
    border-bottom: 1px solid #000;
  }
}
.one,
.two,
.three {
  padding-top: 20px;
  width: 500px;
  height: 200px;
  background-color: #fff;
}
.btm {
  display: flex;
  justify-content: space-around;
  span {
    display: inline-block;
    margin-top: 80px;
  }
}
</style>